<template>
    <div class="sign-box">

        <el-dialog
                title=""
                :visible.sync="centerDialogVisible"
                width="20rem"
                center>
            <div class="top-layout">
                <p>签到领取</p>
                <p>已连续签到{{info.c}}天</p>
            </div>
            <img :src="goldT" alt="" class="goldT">
            <img :src="goldB" alt="" class="goldB">
            <div class="sign-time">
                <p class="title">
                    连续<font color="#14A365">七</font>天签到即可获得超值大礼
                </p>
                <div class="sign-num-list">
                    <div class="list-item" v-for="(l,item) in list" :key="item" v-if="item<6" :class="l.sign===0?'':'active'">
                        <p>
                            <span>{{l.day}}</span>
                        </p>

                        <span>{{info.gift}}ABNB</span>
                    </div>

                    <div class="list-item" v-for="(l,item) in list" :key="item" v-if="item==6">
                        <p>
                            <img :src="gift" alt="">
                        </p>

                        <span>{{info.gift}}ABNB</span>
                    </div>

                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <!--                <el-button @click="centerDialogVisible = false">取 消</el-button>-->
                <el-button type="primary" @click="sign" v-if="!signed">立即签到</el-button>
                <el-button type="primary" @click="centerDialogVisible = false" v-if="signed">我知道了</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import goldT from "@/assets/img/img_gold1.png"
    import goldB from "@/assets/img/img_gold2.png"
    import gift from "@/assets/img/img_gift.png"
    export default {
        name: "SignIn",
        data() {
            return {
                centerDialogVisible: false,
                checked: true,
                goldT:goldT,
                goldB:goldB,
                gift:gift,
                list:[],
                info:{},
                signed:false
            };
        },
        methods:{
            centerDialog(){
                this.getSignInfo()
                this.centerDialogVisible = true
            },
            getSignInfo(){
                let now = new Date();
                let day = now.getDay();
                this.$api.task.signList(this.getCookie('token')).then(res=> {
                    // 执行某些操作
                    this.info = res.data.data
                    this.list = res.data.data.list
                    let arr = []
                    for(const l of res.data.data.list){
                        if(l.sign!=0){
                            arr.push(l.day)
                        }
                    }
                    if(day == arr[arr.length-1]){
                        this.signed = true
                    }

                })
            },
            sign(){
                this.$api.task.sign(this.getCookie('token')).then(res=> {
                    // 执行某些操作
                    this.$toast({
                        message: res.data.msg,
                        duration: 1000,
                        forbidClick: true
                    })
                    this.getSignInfo()
                })
            }
        }
    }
</script>

<style scoped>
    .check{
        margin: 1rem auto;
    }
    .top-layout{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        height: 5rem;
    }
    .top-layout p{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .top-layout p:first-child{
        font-size:1.5rem;
        font-family:PingFang SC;
        font-weight:bold;
        color:rgba(255,255,255,1);
    }
    .top-layout p:last-child{
        width:6.88rem;
        height:1.5rem;
        background:rgba(255,255,255,1);
        border-radius:1rem;
        font-size:0.81rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(20,163,101,1);
    }
    .goldT{
        position: absolute;
        top: -0.86rem;
        width:3.13rem;
        height:1.72rem;
    }
    .goldB{
        position: absolute;
        top: 7rem;
        left: 5rem;
        width:1.59rem;
        height:1.47rem;
    }
    .sign-time{
        margin-top: 4rem;
    }
    .sign-time .title{
        text-align: center;
        margin-bottom: 1rem;
    }
    .sign-num-list{
        padding: 0.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .sign-num-list .list-item{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    .sign-num-list .list-item p{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .sign-num-list .list-item p span{
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width:1.75rem;
        height:1.75rem;
        background:rgba(255,255,255,1);
        border-radius:50%;
        font-size:0.88rem;
        font-family:PingFang SC;
        font-weight:bold;
        color:#14A365;
        border:1px solid rgba(20,163,101,1);

    }
    .sign-num-list .list-item>span{
        font-size:0.5rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(133,157,147,1);
    }
    .sign-num-list .list-item.active p span{
        color: #fff;
        background-color: #14A365;
    }
    .sign-num-list .list-item.active>span{
        color: #14A365;
    }
    .sign-num-list .list-item p img{
        width: 1.75rem;
    }

</style>
<style>
    .sign-box .el-dialog--center{
        width:19.38rem!important;
        height:22.13rem!important;
        border-radius:1rem!important;
        margin-top: 6rem!important;
        background:url("../../assets/img/img_dialog_top.png")no-repeat;
        background-size: 100% 9rem;
        background-color: #fff;
    }
    .sign-box .el-icon-close:before{
        display: none;
    }
    .sign-box .el-dialog__body{
        padding: 0!important;
        font-size:0.81rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:1.13rem;
    }




    .sign-box .el-button--primary{
        width:15rem!important;
        height:2.25rem!important;
        background:rgba(20,163,101,1);

        font-size:0.94rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
        margin: 1rem 0;
        line-height: 2rem!important;
        padding: 0!important;
        border-color: rgba(20,163,101,1);
        width:15rem;
        height:2.25rem;
        border-radius:1rem;
    }

</style>